<template>
  <el-card :bordered="false" class="addOrder">
    <el-page-header
      @back="$router.go(-1)"
      style="margin-bottom: 10px"
    ></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <el-row :gutter="10">
        <el-col :xs="24">
          <el-form-item label="名称：" prop="bannerName">
            <el-input
              v-model="ruleForm.bannerName"
              placeholder="请输入名称"
              style="width: 30%"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-form-item label="图片：" required>
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="true"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :file-list="fileList"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                建议上传大小不超过1M，尺寸为 326*412 的图片
              </div>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="delUplod(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisibleImg">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <!-- modal -->
            <cropper-modal
              ref="cropperModal"
              :optionsData="optionsData"
              @ok="handleCropperSuccess"
            ></cropper-modal>
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-form-item label="生效日期：" prop="sxDate">
            <el-date-picker
              v-model="ruleForm.sxDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 40%"
              @change="sxDateChange"
              :default-time="['00:00:00', '23:59:59']"
              >></el-date-picker
            >
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-form-item label="跳转方式：" prop="skipType">
            <el-radio-group v-model="ruleForm.skipType">
              <el-radio label="00">图文页</el-radio>
              <el-radio label="01">商品列表</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" v-if="ruleForm.skipType == '00'">
          <el-form-item label="图文页" prop="graphicPic">
            <el-upload
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccessGraphicPic"
              class="avatar-uploader"
              action="/admin/sys-file/upload"
            >
              <img
                v-if="ruleForm.graphicPic"
                id="graphicPic"
                :src="ruleForm.graphicPic"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="ruleForm.skipType == '01'">
        <buyingIfor
          :ShopOrGoods="ruleForm.lx == 2"
          slot="table"
          ref="buyingIfor"
          style="margin: 10px 0px 10px 10px"
        />
      </div>
      <div class="content">
        <el-button
          type="primary"
          @click="submitSave('ruleForm')"
          :loading="loadingSure"
          >确定</el-button
        >
        <el-button @click="quxiao('ruleForm')">取消</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.addOrder {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px !important;
  color: #8c939d !important;
  width: 178px !important;
  height: 178px !important;
  line-height: 178px !important;
  text-align: center !important;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>